<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!--以最高的ie浏览器渲染-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<!--视口的设置  移动设备优先 支持移动端 在多个设备上适应  PC iphone 安卓等-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>LuffyCity</title>

		<!-- Bootstrap 必须引入Bootstrap -->
		<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css" />
		<style type="text/css">
			/*不要随意修改Bootstrap提供出来的系统类*/
			
			[class^='col'] {
				border: 1px solid gray;
			}
		</style>

	</head>

	<body>

		<!--固定宽度容器 .container-->

		<div class="container">
			<h1>全局的css样式</h1>

			<!--一行-->
			<div class="row">
				<div class="col-md-4">
					<h1>h1. Bootstrap heading</h1>
					<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
					<h3>h3. Bootstrap heading</h3>
					<h4>h4. Bootstrap heading</h4>
					<h5>h5. Bootstrap heading</h5>
					<h6>h6. Bootstrap heading</h6>

					<p>我是<span class="lead">页面</span>主题</p>
				</div>
				<div class="col-md-4">
					<p class="text-left">Left aligned text.</p>
					<p class="text-center">Center aligned text.</p>
					<p class="text-right">Right aligned text.</p>
					<p class="text-justify">Justified text ustified text ustified text ustified text ustified text ustified text</p>
					<p class="text-nowrap">No wrap text.</p>

					<p class="text-lowercase">Lowercased text.</p>
					<p class="text-uppercase">Uppercased text.</p>
					<p class="text-capitalize">capitalized text.</p>

				</div>

				<div class="col-md-4">

					<!--响应式的表格-->
					<div class="table-responsive">

						<table class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>#</th>
									<th>姓名</th>
									<th>年龄</th>
									<th>身高</th>

								</tr>
							</thead>
							<tbody>
								<tr class="success">
									<td>1</td>
									<td>小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥小马哥</td>
									<td>18</td>
									<td>180</td>
								</tr>
								<tr class="danger">
									<td>2</td>
									<td>小马哥</td>
									<td>18</td>
									<td>180</td>
								</tr>
								<tr class="info">
									<td>3</td>
									<td>小马哥</td>
									<td>18</td>
									<td>180</td>
								</tr>
								<tr>
									<td>4</td>
									<td>小马哥</td>
									<td>18</td>
									<td>180</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

			</div>

			<div class="row">
				<div class="col-md-6">
					<form>
						<div class="form-group">
							<!--隐藏当前元素-->
							<label for="username" class="sr-only">用户名</label>
							<input type="text" class="form-control" id="username" placeholder="用户名">
						</div>
						<div class="form-group">
							<label for="pwd">密码</label>
							<input type="password" class="form-control" id="pwd" placeholder="密码">
						</div>

						<button type="submit" class="btn btn-success">登录</button>
						<button type="submit" class="btn btn-info">注册</button>
					</form>
				</div>
				<div class="col-md-6">
					<form class="">
						<div class="form-group">
							<!--隐藏-->
							<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
							<div class="input-group">
								<div class="input-group-addon"><span class="glyphicon glyphicon-yen"></span></div>
								<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
								<div class="input-group-addon">.00</div>
							</div>
						</div>
						<button type="submit" class="btn btn-primary">Transfer cash</button>
					</form>
				</div>
			</div>

		</div>

	</body>

</html>